<template>
	<!-- 页面全局配置 -->
	<view class="pageconfig">
		<!--vuetop-->
		<!--搜索组件0的布局样式-->
		<view class="  commoncss0   ">
			<view class="cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<input :adjust-position="false" type="text" @tap="goodsSearch(null,null)" placeholder="请搜索商品" confirm-type="search"></input>
				</view>
			</view>
		</view>

		<!--图片轮播1的布局样式 商品轮播 -->
		<view class="  commoncss1   ">
			<swiper class="screen-swiper square-dot" style="min-height: 360rpx;" :indicator-dots="true" :circular="true" :autoplay="true"
				interval="5000" duration="500">
				<swiper-item @click="gourl1(item)" v-for="(item,index) in bannerList" :key="index">
					<image :src="item.imgUrl" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>


		<!--宫格组件2的布局样式  分类 -->
		<view class="  label2  commoncss2    cu-list grid col-4 no-border" style="width: unset;">
			<view class="cu-item" @click="gourl2(item)" v-for="(item,index) in categoryList" :key="index" style="padding:2rpx">
				<view>
					<image v-show="item.imgtype !=2" :src="item.pic" class="" style="width: 70rpx;height:70rpx;line-height:0rpx"></image>
					<view v-show="item.imgtype ==2" :class="['cuIcon-' + item.iconname,'text-' + item.iconcolor]"
						style="font-size: 70rpx;margin-top: 0rpx;"></view>
				</view>
				<text style="font-size: unset;color: unset;margin-top:4rpx;">{{item.name}}</text>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 热销
			</view>
		</view>
		<view class="cu-list grid col-2">
			<view class="cu-item" style="height: 800rpx!important;" v-for="(item,index) in goodsList" :key="index">
				<view>
					<img class="imgPic" :src="item.coverPic" @tap="goodsDetails(item,index)">
					<view class="goodsName"> {{item.name}}</view>
					<view class="minPrice"> ￥{{item.minPrice}}</view>
				</view>
			</view>
		</view>

		<!-- 商品管理 -->
		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 推荐
			</view>
		</view>
		<view class="cu-list grid col-2">
			<view class="cu-item" style="height: 600rpx!important;" v-for="(item,index) in goodsList" :key="index">
				<view>
					<img class="imgPic" :src="item.coverPic" @tap="goodsDetails(item,index)">
					<view class="goodsName"> {{item.name}}</view>
					<view class="minPrice"> ￥{{item.minPrice}}</view>
				</view>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 上新
			</view>
		</view>
		<view class="cu-list grid col-2">
			<view class="cu-item" v-for="(item,index) in goodsList" :key="index">
				<view>
					<img class="imgPic" :src="item.coverPic" @tap="goodsDetails(item,index)">
					<view class="goodsName"> {{item.name}}</view>
					<view class="minPrice"> ￥{{item.minPrice}}</view>
				</view>
			</view>
		</view>

	</view>
</template>


<script>
	export default {
		data() {
			return {
				bannerList: [],
				categoryList: [],
				goodsList: []
			}
		},
		onLoad() {
			this.init();
		},


		//下拉刷新
		onPullDownRefresh: function() {
			console.log('下拉刷新');
			this.init();
			//停止刷新
			uni.stopPullDownRefresh();
		},
		methods: {
			init() {
				// 字典數據加載
				this.dict.refreshDict(this.path);

				// banner
				this.crud.get(this.path, "/api/client/sys/banner/list/1").then(res => {
					this.bannerList = res.data.data;
				})
				// 分类
				this.crud.get(this.path, "/api/client/all/category/page?disable=0&root=3&size=7").then(res => {
					res.data.data.records.forEach(category => {
						// 使用图片
						category.imgtype = 1;
						category.pic =
							"https:\/\/shitangsys.cntdh.net\/\/uploads\/store\/comment\/20220426\/879d742839d0047baafbb465f9b3ad98.png";
						// 使用图标
						// category.imgtype = 2;
						// category.iconname =  "home";
						// category.iconcolor =  "black";
					})
					// 默认最多查询7条数据， 默认添加一条更多的数据
					this.categoryList = res.data.data.records;
					this.categoryList.push({
						id: "0",
						name: "更多",
						imgtype: 2,
						iconname: "new",
						iconcolor: "orange"
					})

				})
				// 商品
				this.crud.get(this.path, "/api/client/all/goods/findPage?size=4").then(res => {
					this.goodsList = res.data.data.records;
				})
			},

			/**
			 * 点击搜索
			 * categoryName 分类名称
			 * 1、搜索点击不带参数
			 * 2、分类点击带3级分类Id
			 */
			goodsSearch(categoryThreeId, categoryThreeName) {
				let param = ""
				if (categoryThreeId != null) {
					param = "?categoryThreeId=" + categoryThreeId +
						"&categoryThreeName=" + categoryThreeName;
				}
				uni.navigateTo({
					url: "/pages/fpage1/goods/index" + param,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},

			/**
			 * 点击商品
			 */
			goodsDetails(item, index) {
				uni.navigateTo({
					url: "/pages/fpage1/goods/details?id=" + item.id,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},



			/**
			 * 点击图片轮播
			 */
			gourl1(item) {
				uni.navigateTo({
					url: item.url,
				});
			},
			/**
			 * 点击分类
			 */
			gourl2(item) {
				if (item.id == "0") {
					// 打开分类页
					uni.navigateTo({
						url: "/pages/fpage1/category/category",
						success: res => {},
						fail: () => {},
						complete: () => {}
					});
				} else {
					// 打开商品列表并搜索
					this.goodsSearch(item.id, item.name);
				}
			},
		}
	}
</script>

<style lang="less">
	.imgPic {
		height: 500rpx;
		width: 95%;
		border-radius: 10px;
	}

	.goodsName {
		text-align: left;
		margin-top: 2%;
		margin-left: 5%;
		/* 超出范围的显示... */
		overflow: hidden;
		/*隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/* 超出部分省略号 */
	}

	.minPrice {
		text-align: left;
		margin-top: 2%;
		margin-left: 5%;
		color: #ff5500;
	}



	page {
		background-color: #F8F9FB;
	}

	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 8%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}

	/**pagedomcss**/

	/**本页搜索组件0的css代码**/
	.commoncss0 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**本页图片轮播1的css代码**/
	.commoncss1 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**本页宫格组件2的css代码**/
	.commoncss2 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}

	/**vuecss**/
</style>
